<template>
  <section>
    <span class="font-bold"> 搜索： &nbsp;</span>
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="getTypeByName"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
      prefix-icon="el-icon-search"
    />
  </section>
</template>

<script>
  export default {
    name: 'CarRentalSearch',
    data() {
      return {
        state: '',
      }
    },
    methods: {
      async getTypeByName(queryString, cb) {
        // var restaurants = this.restaurants
        // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
        const ret = await reqTypeByName(queryString)
        let data = ret.data.map(item => ({ ...item, value: item.carName }))
        cb(data || [])
      },
      createStateFilter(queryString) {
        return state => {
          return state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        }
      },
      handleSelect(item) {
        this.$router.push(`/detail/${item._id}`)
      },
    },
  }
</script>

<style></style>
